<template>
	<div class="sys-config-container">
		<el-dialog v-model="state.isShowDialog" draggable width="600px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
					<span> {{ props.title }} </span>
				</div>
			</template>
			<el-form :model="state.editForm" ref="editFormRef" label-width="auto"  label-position="top">
				<el-row :gutter="35">
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="班次名称" prop="name" :rules="[{ required: true, message: '班次名称不能为空', trigger: 'blur' }]">
							<el-input v-model="state.editForm.name" placeholder="班次名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="owner" :rules="[{ required: true, message: '班次负责人不能为空', trigger: 'blur' }]">
                            <template #label="scope">
                                班次负责人
                                <el-tooltip class="box-item" effect="dark" content="班次负责人可以删除修改自己的班次，默认为班次的创建者，可以添加其他的管理员协同管理"  placement="top-start">
                                    <el-icon style="width: 1em; height: 1em; margin-right: 8px" ><Warning /> </el-icon>
                                </el-tooltip>
                            </template>
							<el-select v-model="state.editForm.owner" placeholder="班次负责人">
                                <el-option v-for="item in state.ownerList" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
						</el-form-item>
					</el-col>
				</el-row>
                <el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item>
                            <template #label="scope">
                                上下班时间
                                <el-button size="small" text type="primary" @click="addRange()"> 添加 </el-button>
                            </template>
                            <div class="timeRanges">
                                <div v-for="(item,index) in state.editForm.sections" class="timeRangeItem mb10">
                                    <div class="mb5 rangetitle">
										第{{index+1}}次上下班
										<el-icon v-if="index>0" size="16" class="removeBtn" @click="delRange(index)"><ele-CircleClose /></el-icon>
									</div>
                                    <div class="mb5 rangestart">
                                        <label class="lblTag">上班时间</label>
                                        <el-time-picker v-model="item.punches[0].checkTime" format="HH:mm" style="width:115px" @change="dutyTimeChange(index)"/>
                                    </div>
                                    <div class="mb5 rangestartoffset">
                                        <label class="lblTag">打卡时段</label>
                                        <label class="mr5">上班前</label>
                                        <el-select v-model="item.punches[0].beginMin" style="width:80px" >
                                            <el-option v-for="item in state.offsetList" :key="item.value" :label="item.label" :value="item.value"/>
                                        </el-select>
										<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Right /></el-icon>
										<label class="mr5">上班后</label>
                                        <el-select v-model="item.punches[0].endMin" style="width: 80px" >
                                            <el-option v-for="item in state.offsetList" :key="item.value" :label="item.label" :value="item.value"/>
                                        </el-select>
                                    </div>
                                    <div class="mb5 rangeend">
                                        <label class="lblTag">下班时间</label>
                                        <el-time-picker v-model="item.punches[1].checkTime" format="HH:mm" style="width:115px"  @change="dutyTimeChange(index)"/>
										<el-tag v-if="item.punches[1].across" class="mx-1 ml5" effect="dark" type="danger">次日</el-tag>
                                    </div>
									<div class="mb5 rangeendoffset">
                                        <label class="lblTag">打卡时段</label>
                                        <label class="mr5">下班前</label>
                                        <el-select v-model="item.punches[1].beginMin" style="width:80px" >
                                            <el-option v-for="item in state.offsetList" :key="item.value" :label="item.label" :value="item.value"/>
                                        </el-select>
										<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Right /></el-icon>
										<label class="mr5">下班后</label>
                                        <el-select v-model="item.punches[1].endMin" style="width: 80px" >
                                            <el-option v-for="item in state.offsetList" :key="item.value" :label="item.label" :value="item.value"/>
                                        </el-select>
                                    </div>
                                </div>
                            </div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style>
.timeRanges{
	width: 100%;
}
.timeRangeItem{
	background-color: #f0f0f0;
	border-radius: 5px;
	padding: 5px 15px;
}
.lblTag{
	width: 60px;
    display: inline-flex;
	color: #666666;
}
.rangetitle{
	height: 30px;
	line-height: 30px;
	border-bottom: solid 1px #dcdcdc;
}
.removeBtn{
	font-size: 16px;
    margin: 5px;
    float: right;
    vertical-align: middle;
    color: #df8484;
    cursor: pointer;
}
.removeBtn:hover{
	color: #c54848;
}
</style>

<script lang="ts" setup name="EditForm">
import { reactive, ref } from 'vue'; 
import { ElMessageBox, ElMessage } from 'element-plus';
import { addAttendanceShift,updateAttendanceShift } from '/@/api-services/api';

const props = defineProps({
	title: String,
});
const emits = defineEmits(['updateData']);
const editFormRef = ref();
const state = reactive({
	isShowDialog: false,
	editForm: {} as any,
    ownerList:[
		{value:'1924144345894047',label:'汪莉'},
		{value:'044301692528761165',label:'濮阳羲'},
		{value:'123123123',label:'罗万里'},
		{value:'manager490',label:'王辉'},
	],
    offsetList:[] as Array<any>
});

const InitData=()=>{
	let tempList:Array<any>=[{label:'未设置',value:null}];
    for(let i=0;i<60;i++){
        tempList.push({label:i+'分钟',value:i})
    }
    state.offsetList=tempList;
}

// 打开弹窗
const openDialog = (row: any) => {
	InitData(); 
	if(row && row.id>0){
		state.editForm = JSON.parse(JSON.stringify(row));
	}else{
		state.editForm={
			"name": "",
			"owner": "1924144345894047",
			"sections": [
				{ 
					"punches": [
						{
							
							"beginMin": 14,
							"checkTime": "1970-01-01 09:00:00",
							"endMin": 4,
							"checkType":"OnDuty",
							"across":false,
						},
						{
							"beginMin": 1,
							"checkTime": "1970-01-01 18:00:00",
							"endMin": 15,
							"checkType":"OffDuty",
							"across":false,
						}
					]
				}
			]
		}
	}
	state.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
	emits('updateData');
	state.isShowDialog = false;
};

const addRange=()=>{
	let entityObj=JSON.parse(JSON.stringify(state.editForm));
	entityObj.sections.push({punches:[{
		"beginMin": null,
		"checkTime": "",
		"endMin": null,
		"checkType":"OnDuty",
		"across":false,
	},{
		"beginMin": null,
		"checkTime": "",
		"endMin": null,
		"checkType":"OffDuty",
		"across":false,
	}]});
	state.editForm=entityObj;
}
const delRange=(_index:Number)=>{
	let entityObj=JSON.parse(JSON.stringify(state.editForm)); 
	if(entityObj.sections.length>_index){
		entityObj.sections.splice(_index,1);
	}
	state.editForm=entityObj;
}

const dutyTimeChange=(_sectionIndex:any)=>{
	let entityObj=JSON.parse(JSON.stringify(state.editForm));
	if(entityObj.sections[_sectionIndex].punches[0].checkTime>entityObj.sections[_sectionIndex].punches[1].checkTime){
		entityObj.sections[_sectionIndex].punches[1].across=true; 
	}else{
		entityObj.sections[_sectionIndex].punches[1].across=false; 
	}
	state.editForm=entityObj;
}
 
// 取消
const cancel = () => {
	state.isShowDialog = false;
};

// 提交
const submit = () => {
	editFormRef.value.validate(async (valid: boolean) => {
		if (!valid) return;
		if (state.editForm.id != undefined && state.editForm.id > 0) {
			updateAttendanceShift(state.editForm).then((rlt)=>{
				ElMessage.success('更新成功');
				closeDialog();
			});
		} else {
			addAttendanceShift(state.editForm).then((rlt)=>{
				ElMessage.success('新增成功');
				closeDialog();
			});
		}
	});
};

// 导出对象
defineExpose({ openDialog });
</script>